<template>
  <div class="table-page">
    <a-form :model="listParams" layout="inline" auto-label-width size="small" class="form mb-10">
      <a-form-item hide-label>
        <a-select v-model="listParams.os" placeholder="平台" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option :value="1" label="安卓"></a-option>
          <a-option :value="2" label="IOS"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label>
        <ms-date
          v-model:start="listParams.startAt"
          v-model:end="listParams.endAt"
          :showQuick="true"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item hide-label>
        <a-input v-model="listParams.version" placeholder="请输入版本号"></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-input v-model="listParams.studentId" placeholder="请输入会员学号"></a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-button type="primary" size="small" @click="changeCurrent(1)">
          <template #icon>
            <icon-search />
          </template>
          <template #default>查询</template>
        </a-button>
        <a-button class="ml-m" size="small" @click="onResetSearch">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      id="systemAppErrorLog"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
      <template #custom-extra>
        <a-button type="primary" size="small" :loading="exportLoading" @click="onExportLog">
          <template #icon><icon-download /></template>
          <span>导出订单</span>
        </a-button>
      </template>
    </GiTable>
    <EditDrawer ref="EditDrawerRef" @getTableData="getTableData" :platformList="platformList"></EditDrawer>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { appErrorLogList, appErrorLogExport } from '@/apis'
import EditDrawer from './EditDrawer.vue'
import { usePlatform } from '@/hooks/app'
import { usePagination } from '@/hooks'
import MsCopyDiv from '@/components/MsCopyDiv/index.vue'
import { reAssign, deleteEmpty } from '@/utils/common'
import dayjs from 'dayjs'

defineOptions({ name: 'systemAppErrorLog' })

const columns = ref([
  {
    title: '会员ID',
    width: 100,
    dataIndex: 'userId'
  },
  {
    title: '日志提交时间',
    width: 180,
    dataIndex: 'submitAt'
  },
  {
    title: '操作系统',
    width: 120,
    dataIndex: 'osName'
  },
  {
    title: '日志内容',
    width: 500,
    render: (data) => {
      const text = data.record.content
      return h(MsCopyDiv, { text, title: '日志内容', line: 4, no: true, mini: true, position: 'left' })
    }
  },
  {
    title: 'app版本',
    width: 120,
    dataIndex: 'version'
  }
])

const EditDrawerRef = ref()
const loading = ref(false)
const exportLoading = ref(false)
const tableData = ref([])

const listParams = reactive({
  page: 1,
  pageSize: 10,
  studentId: undefined,
  startAt: undefined,
  endAt: undefined,
  os: undefined,
  version: undefined
})

const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: 10 })

// 获取平台信息
const { platformList, getPlatformList } = usePlatform()
getPlatformList()

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await appErrorLogList(deleteEmpty(listParams))
    tableData.value = res.data.list
    setTotal(10000)
  } finally {
    loading.value = false
  }
}

getTableData()

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  reAssign(listParams, false)
  changeCurrent(1)
}

// 导出日志
const onExportLog = async () => {
  try {
    exportLoading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await appErrorLogExport(deleteEmpty(listParams))
    const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/vnd.ms-excel' }))
    const aDOM = document.createElement('a')
    aDOM.style.display = 'none'
    aDOM.href = url
    const fileName = dayjs().format('YYYY-MM-DD HH时mm分ss秒') + 'app错误日志导出.xlsx'
    aDOM.setAttribute('download', fileName)
    document.body.appendChild(aDOM)
    aDOM.click()
    document.body.removeChild(aDOM)
    Message.success('导出成功')
  } finally {
    exportLoading.value = false
  }
}
</script>
